<template>
  <!-- 组件外部的 form-item -->
    <div v-if="(typeof component.display == 'undefined' || component.display === true)">
      <!-- 调用自己开发的自定义组件，具体名称改成自己的 -->
      <DataGrid v-model="value" v-if="value" :formModel="formModel" :columns="props.component.columns"/>
    </div>
</template>
<script setup>
// 引入相关vue必要的api
import {ref, inject, onMounted, watch} from 'vue'
import { useRouter } from 'vue-router';
// 引入处理索引的函数
import {get} from 'lodash'
// 引入处理事件的函数
import DataGrid from "@cps/DataGrid/DataGrid.vue";
import {runEvent} from "@cps/ma-form/js/event.js";
// 组件都需要定义以下的props
const props = defineProps({
  component: Object,
  customField: { type: String, default: undefined }
})
// form数据列表
const formModel = inject('formModel')
// 获取当前路由对象
const router = useRouter();
const auditRout = (auhList) => {
    return router.currentRoute.value.fullPath.includes('shipmentAudit') || router.currentRoute.value.fullPath.includes('shipment')
}
// 使用数据字典，如有必要使用可加入下面这行代码
const dictList = inject('dictList')
// 该组件在form数据的索引名称
const index = props.customField ?? props.component.dataIndex
// 该组件的表单数据
const value = ref(get(formModel.value, index))

// // 监听组件数据的改变
watch( () => get(formModel.value.parcel, index), vl => {
  console.log('vl',vl)
  if(vl){
    value.value.splice(0,value.value.length)
    value.value.push(...vl)
  }
})

// watch( () => get(formModel.value, index), vl => {
//   console.log('formModel.value',formModel.value)
//   value.value.splice(0,value.value.length)
//   value.value.push(...vl)
// }, {deep: auditRout()})

// 绑定组件事件
runEvent('onCreated', 'handleCommonEvent')
onMounted(() => {
  runEvent('onMounted', 'handleCommonEvent')
})
</script>